import React from 'react';
import { Spin, Icon } from 'antd';
import { InterviewDetail, ButtonPc as Button } from '@/pages/RecruitEmail/pc/components';
import initPic from '@/pages/RecruitEmail/images/interview-bg-register.png';
import { getRecruitmentInfoByEncryptId } from '@/services/user';
import { useRequest, defaultFormatResult } from '@/hooks';
import moment from 'moment';
import { printScreenDown } from '@/pages/EntryManage/utils';
import styles from './index.less';
import InterviewBoxPcB from '../InterviewBoxPcB';

// 劳动合同类型单位
const LABOUR_PERIOD_TYPE = [
    { value: 1, text: '年' },
    { value: 2, text: '月' }
];

// 试用期类型单位
const PROBATION_PERIOD_TYPE = [
    { value: 1, text: '月' },
    { value: 2, text: '天' }
];

const Text = ({ children, className }) => <span className={className}>{children}</span>;
const InterviewJoin = props => {
    const { nid, getTotalDesc } = props;

    const { data, loading } = useRequest(() => getRecruitmentInfoByEncryptId({ employId: nid }), {
        ...defaultFormatResult
    });

    const infoData = React.useMemo(() => {
        if (data) {
            const {
                offerEffectiveValue = 48,
                talentName = '',
                talentSex = '',
                probationPeriodNumber = 0,
                probationPeriodType = 1,
                officialMonthSalary = '',
                labourPeriodNumber = '',
                labourPeriodType = 1,
                suggestedEntryTime = '',
                sendTime = '',
                departmentName = '',
                dutyName = '',
                companyAddress = '',
                templateContent = ''
            } = data;
            const quarterPerformance = officialMonthSalary ? ((officialMonthSalary * 1.5) / 4).toFixed(0) : '0';
            const halfYearPerformance = officialMonthSalary ? ((officialMonthSalary * 1.5) / 2).toFixed(0) : '0';

            const deActivateTime = moment(sendTime || new Date())
                .add(offerEffectiveValue, 'hour')
                .format('YYYY-MM-DD HH:mm');
            return {
                offerEffectiveValue,
                talentName,
                talentSex,
                probationPeriodNumber,
                probationPeriodType,
                officialMonthSalary,
                labourPeriodNumber,
                labourPeriodType,
                suggestedEntryTime,
                sendTime,
                departmentName,
                dutyName,
                companyAddress,
                quarterPerformance,
                halfYearPerformance,
                deActivateTime,
                templateContent
            };
        }
        return null;
    }, [JSON.stringify(data)]);

    const renderLabourPeriod = (show = true) => {
        if (infoData?.labourPeriodNumber === -1) {
            return <Text>无固定期限</Text>;
        }
        return (
            <>
                {show && '劳动合同自您入职之日起，为期'}
                <Text>
                    {`${infoData?.labourPeriodNumber}`}
                    {`${LABOUR_PERIOD_TYPE.find(item => item.value === infoData?.labourPeriodType)?.text}`}
                </Text>
            </>
        );
    };
    const list = React.useMemo(() => {
        if (data) {
            return [
                {
                    key: '任职部门',
                    iconType: 'zuzhijiagouICON',
                    showIcon: true,
                    value: data?.departmentName || '--'
                },
                {
                    key: '任职岗位',
                    showIcon: true,
                    iconType: 'infos_namecard_icon_default1',
                    value: data?.dutyName || '--'
                },

                {
                    key: '入职时间',
                    showIcon: true,
                    iconType: 'timeAdjusted',
                    value: data?.suggestedEntryTime || '--'
                },
                // {
                //     key: '入职地点',
                //     showIcon: true,
                //     iconType: 'infos_namecard_icon_default',
                //     value: data?.suggestedEntryTime || '--'
                // },
                {
                    key: '服务期限',
                    iconType: 'infos_namecard_icon_default',
                    showIcon: true,
                    value: (
                        <div className={styles.services}>
                            <span style={{ flex: 1 }}>
                                {renderLabourPeriod(false)}
                                {`，包含${infoData?.probationPeriodNumber}${
                                    infoData?.probationPeriodType === 1 ? '个' : ''
                                }${
                                    PROBATION_PERIOD_TYPE.find(item => item.value === infoData?.probationPeriodType)
                                        ?.text
                                }试用期`}
                            </span>
                        </div>
                    )
                },
                {
                    value: '',
                    showIcon: false,
                    key: (
                        <div className={styles.services}>
                            <a
                                style={{ fontSize: '14px', color: '#5590F6', flex: 1 }}
                                onClick={() => {
                                    // doPrint3();
                                    printScreenDown(document.querySelector('#printPage'), '录用通知书');
                                }}
                            >
                                <Icon type="download" style={{ marginRight: '8px' }} color="#5590F6"></Icon>
                                下载录用通知书
                            </a>
                        </div>
                    )
                }
            ];
        }
        return [];
    }, [data]);
    const pageContent = (
        <div
            id="printPage"
            style={{
                width: '100%',
                padding: '20px 248px 72px 348px',
                position: 'absolute',
                zIndex: -1000,
                wordBreak: 'break-all'
            }}
        >
            <div>
                <div dangerouslySetInnerHTML={{ __html: infoData?.templateContent }} />
            </div>
        </div>
    );

    return (
        <>
            <div className={styles.interviewPc}>
                <Spin spinning={loading}>
                    <InterviewBoxPcB
                        titleProps={{
                            src: initPic,
                            // titleAfter: companyName,
                            title: '您已接受录用',
                            content: '请您根据指引完成入职准备',
                            iconType: 'accept',
                            iconStyle: { color: '#44C69D', marginRight: 12 },
                            picStyle: { marginBottom: 16, marginLeft: 84, marginTop: 16 }
                        }}
                        left={
                            <div className={styles.resultContent}>
                                <span className={styles.spanDesc}>
                                    为了给您提供更好入职体验，请您根据指引完成入职准备
                                </span>

                                <Button
                                    style={{ width: '253px' }}
                                    type="primary"
                                    // loading={submitLoading}
                                    onClick={() => {
                                        // setEntryStatus('entry');
                                        getTotalDesc();
                                    }}
                                >
                                    入职准备
                                </Button>
                            </div>
                        }
                        right={
                            <div
                                style={{
                                    maxWidth: 504,
                                    margin: '0 auto',
                                    boxSizing: 'border-box'
                                }}
                            >
                                <div style={{ marginTop: 119, marginBottom: 141 }} className={styles.detailCon}>
                                    <div className={styles.luyong}>录用信息</div>
                                    <InterviewDetail
                                        dataSource={list}
                                        // style={{ marginBottom: 16 }}
                                        keyStyle={{
                                            fontWeight: 400,
                                            height: '22px',
                                            fontSize: '14px',
                                            fontFamily: 'PingFangSC-Regular, PingFang SC',
                                            color: 'rgba(0,0,0,0.25)',
                                            lineHeight: '22px'
                                        }}
                                        valueStyle={{
                                            height: '26px',
                                            fontSize: '18px',
                                            fontFamily: 'PingFangSC-Regular, PingFang SC',
                                            fontWeight: 400,
                                            color: 'rgba(0,0,0,0.85)',
                                            lineHeight: '26px',
                                            textAlign: 'left'
                                        }}
                                    />
                                </div>
                            </div>
                        }
                    />
                </Spin>
            </div>
            {infoData && pageContent}
        </>
    );
};

export default InterviewJoin;
